<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* .box1 {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid #000;
            float: left;

            margin-right: 50px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            border: 1px solid #000;
            float: left;

            margin: 50px;
            margin-top: 50px;
            margin-left: 100px;

            margin: 50px 100px 150px 200px;
        } */

      .box1 {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        border: 1px solid #000;
        /* float: left;
            margin-right: 50px; */
        /* margin-bottom: -100px; */
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: lightcoral;
        border: 1px solid #000;
        /* float: left;
            margin-left: 50px; */
        /* margin-top: 50px; */
      }

      .box3 {
        width: 500px;
        height: 400px;
        background-color: orange;
        /* overflow: hidden; */
        /* position: absolute; */
        /* display: inline-block; */
        /* border: 1px solid #000; */
        /* float: left; */
      }
      .box4 {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        /* margin-top: 50px; */

        margin: 0 auto;
      }

      span {
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>

    <p>
      外间距(间距/边界),表示的是元素外边的空白的区域表示的是元素外边的空白的区域表示的是元素外边的空白的区域表示的是元素外边的空白的区域表示的是元素外边的空白的区域表示的是元素外边的空白的区域
    </p>
    <p>外间距(间距/边界),表示的是元素外边的空白的区域</p>
    <p>外间距(间距/边界),表示的是元素外边的空白的区域</p>
    <p>外间距(间距/边界),表示的是元素外边的空白的区域</p>
    <p>外间距(间距/边界),表示的是元素外边的空白的区域</p>

    <div class="box3">
      <div class="box4"></div>
    </div>

    <span>span的外间距</span>
  </body>
</html>

<!-- 
    margin: 外间距(间距/边界),表示的是元素外边的空白的区域

    margin是用来改变元素和元素之间的位置关系的

    margin不会影响元素的大小的
    背景都不会影响margin的区域
    可以添加负数的

    可以单一方向加外间距
        margin-top
        margin-bottom
        margin-left
        margin-right

    可以添加多个参数
        1个 上下左右
        2个 上下 左右
        3个 上 左右 下
        4个 上 右 下 左

    当两个元素上下排列，上面元素的下间距会和下面元素的上间距重合

    当父元素里面的第一个元素添加了margin-top以后，默认会把父元素一起带下来
    由于bfc(block formatting context)的原因
    通常可以用overflow: hidden;(用于处理溢出隐藏)来解决

    不能独占一行的元素，默认是不能添加上下的间距的(浮动了或者定位了，那么就可以加了)

    margin: 0 auto;可以让元素水平居中
    auto 占据剩余空间
    默认情况下只能用于水平方向(除非定位/弹性盒)
 -->
